<!-- 操作记录 -->

<template>
  <div>
    <EasyScroll full>
      <el-timeline>
        <el-timeline-item
          v-for="(item, i) in one.changeOperateDtoList || []"
          :key="item.id"
          :timestamp="CORE.timeStr(item.operateTime)"
        >
          <div class="DetailRepair-RepairRecord-title">{{ item.operateTypeName }}</div>

          <div v-for="(text, i) in getText(item)" :key="i">
            {{ text[0] }}：<span :class="text[2]">{{ text[1] }}</span>
          </div>

          <template #dot>{{ i + 1 }}</template>
        </el-timeline-item>
      </el-timeline>
    </EasyScroll>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OurRecord',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取文本
     */
    getText(item) {
      const {
        userName = '',
        userPhone = '',
        approvalResult,
        approvalView,
        operateType,
        description,
      } = item

      const user = `${userName}${userPhone ? ` (${userPhone})` : ''}`
      const audit = approvalResult === '1' ? '同意' : '不同意'
      const color = `DetailRepair-RepairRecord-${audit === '同意' ? 'yes' : 'no'}`

      switch (operateType) {
        case 1: // 申请
          return [['操作人', user]]

        case 2: // 审批
          return [
            ['操作人', user],
            ['审批结果', audit, color],
            ['审批意见', approvalView],
          ]

        case 3: // 完成
          return [
            ['操作人', user],
            ['操作说明', description],
          ]

        default:
          return []
      }
    },
  },
}
</script>
